<template>
  <van-row :gutter="8">
    <van-col span="12" ref="col1">
      <div
        class="flow_two"
        @click="handleGoTo(item)"
        v-for="(item, index) in dataList1"
        :key="index"
      >
        <div
          class="player_img"
          v-if="
            page.contestantListComponent &&
            page.contestantListComponent.element.COVER
          "
        >
          <van-image
            @load="finished"
            fit="cover"
            radius="4px"
            lazy-load
            :src="
              item.coverType === 'IMAGE' && item.coverLink
                ? item.coverLink
                : require('../../../../assets/images/cover.png')
            "
          />
          <div class="border" v-if="basic.contestantBorderStyleLink">
            <van-image :src="basic.contestantBorderStyleLink" />
          </div>
          <div
            class="number_wrap"
            :style="{
                background: basic.theme || 'rgba(0, 0, 0, 0.4)',
              }"
            v-if="
              page.contestantListComponent &&
              page.contestantListComponent.element.NUMBER
            "
          >
            {{ item.number }}
          </div>
        </div>
        <div class="player_info">
          <div
            class="vc"
            v-if="
              page.contestantListComponent &&
              page.contestantListComponent.element.VC
            "
          >
            {{ item.vc }}{{ info.unit }}
          </div>
          <div
            class="name"
            v-if="
              page.contestantListComponent &&
              page.contestantListComponent.element.NAME
            "
          >
            {{ item.name }}
          </div>
          <div
            class="introduction"
            v-if="
              page.contestantListComponent &&
              page.contestantListComponent.element.INTRODUCTION
            "
          >
            {{ item.introduction }}
          </div>
          <div
          v-if=" page.contestantListComponent &&
                page.contestantListComponent.element.VOTING_BUTTON"
            class="type"
            @click.stop="handleVoteSingle(item)"
            :style="{
              background:
                contestantIds.indexOf(item.id) == -1
                  ? basic.theme || cfg.theme
                  : '#999',
            }"
          >
            <span
              class="iconfont iconicon-test"
              v-if="contestantIds.indexOf(item.id) == -1"
            ></span>
            <span style="margin-left: 4px">{{
              contestantIds.indexOf(item.id) != -1 ? "已选择" : info.type
            }}</span>
          </div>
        </div>
      </div>
    </van-col>
    <van-col span="12" ref="col2">
      <div
        class="flow_two"
        @click="handleGoTo(item)"
        v-for="(item, index) in dataList2"
        :key="index"
      >
        <div
          class="player_img"
          v-if="
            page.contestantListComponent &&
            page.contestantListComponent.element.COVER
          "
        >
          <van-image
            fit="cover"
            radius="4px"
            lazy-load
            @load="finished"
            :src="
              item.coverType === 'IMAGE' && item.coverLink
                ? item.coverLink
                : require('../../../../assets/images/cover.png')
            "
          />
          <div class="border" v-if="basic.contestantBorderStyleLink">
            <van-image :src="basic.contestantBorderStyleLink" />
          </div>
          <div
            class="number_wrap"
            :style="{
                background: basic.theme || 'rgba(0, 0, 0, 0.4)',
              }"
            v-if="
              page.contestantListComponent &&
              page.contestantListComponent.element.NUMBER
            "
          >
            {{ item.number }}
          </div>
        </div>
        <div class="player_info">
          <div
            class="vc"
            v-if="
              page.contestantListComponent &&
              page.contestantListComponent.element.VC
            "
          >
            {{ item.vc }}{{ info.unit }}
          </div>
          <div
            class="name"
            v-if="
              page.contestantListComponent &&
              page.contestantListComponent.element.NAME
            "
          >
            {{ item.name }}
          </div>
          <div
            class="introduction"
            v-if="
              page.contestantListComponent &&
              page.contestantListComponent.element.INTRODUCTION
            "
          >
            {{ item.introduction }}
          </div>
          <div
          v-if=" page.contestantListComponent &&
                page.contestantListComponent.element.VOTING_BUTTON"
            class="type"
            @click.stop="handleVoteSingle(item)"
            :style="{
              background:
                contestantIds.indexOf(item.id) == -1
                  ? basic.theme || cfg.theme
                  : '#999',
            }"
          >
            <span
              class="iconfont iconicon-test"
              v-if="contestantIds.indexOf(item.id) == -1"
            ></span>
            <span style="margin-left: 4px">{{
              contestantIds.indexOf(item.id) != -1 ? "已选择" : info.type
            }}</span>
          </div>
        </div>
      </div>
    </van-col>
  </van-row>
</template>
<script>
import { mapGetters } from "vuex";
import cfg from "@/config";
export default {
  props: {
    voteInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
    contestantIds: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      dataList1: [],
      dataList2: [],
      playerList: [],
      info: {},
      cfg,
      current: 0,
    };
  },
  watch: {
    voteInfo(newVal) {
      this.info = newVal;
    },
  },
  computed: {
    ...mapGetters("configs", {
      basic: "basic",
      ad: "ad",
      page: "page",
    }),
  },
  methods: {
     clearList(){
      this.dataList1=[]
      this.dataList2=[]
    },
    recievePlayerList(arr) {
      this.playerList = arr;
      this.$nextTick(() => {
        this.mountMenu();
      });
    },
    handleGoTo(item) {
      this.$emit("handleTwoGoTo", item);
    },
    handleVoteSingle(item) {
      this.$emit("handleTwoVoteSingle", item);
    },
    finished() {
      this.mountMenu(this.current + 1);
    },
    mountMenu(arg) {
      let temp = this.playerList;
      let index = arg || 0;
      let refName = this.selectCol();
      if (temp.length > index) {
        this[refName].push(this.playerList[index]);
        this.current = index;
        if (!this.page.contestantListComponent.element.COVER) {
          this.$nextTick(() => {
            this.mountMenu(index + 1);
          });
        }
      } else {
        this.$emit("handleChangeLoading", false);
        // this.listConfig.loading = false;
      }
    },
    selectCol() {
      let getHeight = (ref) => {
        return this.$refs[ref].$el.offsetHeight;
      };
      let height1 = getHeight("col1");
      let height2 = getHeight("col2");
      switch (Math.min(height1, height2)) {
        case height1:
          return "dataList1";
        case height2:
          return "dataList2";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.flow_two {
  margin-top: 8px;
  padding-bottom: 10px;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  background-color: #fff;
  &:first-child {
    margin-top: 0;
  }
  .player_img {
    position: relative;
    width: 100%;
    ::v-deep.van-image {
      width: 100%;
      height: auto;
      font-size: 0;
    }
    .border {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      ::v-deep.van-image {
        width: 100%;
        height: 100%;
        font-size: 0;
      }
    }
    .number_wrap {
      position: absolute;
      left: 5px;
      top: 0;
      width: 30px;
      height: 35px;
      background-color: rgba(0, 0, 0, 0.4);
      font-size: 14px;
      color: #fff;
      text-align: center;
      line-height: 35px;
      border-bottom-right-radius: 50%;
      border-bottom-left-radius: 50%;
    }
  }
  .player_info {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 10px;
    .vc {
      font-size: 14px;
      color: #4a4a4a;
    }
    .name {
      font-size: 14px;
      color: #4a4a4a;
      margin-top: 6px;
    }
    .introduction {
      font-size: 12px;
      color: #999;
      margin-top: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      padding: 0 10px;
      line-height: 18px;
    }
    .type {
      margin-top: 10px;
      font-size: 14px;
      color: #fff;
      padding: 5px 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 2px;
    }
  }
}
</style>